<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css"/>
    	<link rel="stylesheet" type="text/css" href="dist/css/app.css"/>
    	<script src="dist/js/jq0908.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/public.js" type="text/javascript" charset="utf-8"></script>
		<title>QUANTUM MATERIALS</title>
		<style type="text/css">
			body{
				background-color: #f7f7f7;
			}
			.logo2{
				width: 18.5%;
				margin: 40px auto;
			}
			.form_forgot{
				width: 53%;
				margin: 0 auto;
				background-color: #fff;
				box-shadow:0 0 10px 0 rgba(0,0,0,0.10);
				padding: 7.25% 12.25% 5.58% 12.75%;
			}
			#sub_forgot_pas{
				border: 1px solid #E75423;
				color:#E75423;
				display: block;
				width: 50%;
				margin: 40px auto 0;
			}
			#sub_forgot_pas:hover{
				color: #fff;
				background-color: #E75423;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid" style="padding: 0;">
			<div class="logo2">
				<img src="images/logo2.png" class="img-responsive"/>
			</div>
			<div class="form_forgot">
				<form>
				  <div class="form-group">
				    <label for="inputEmail1">Email:</label>
				    <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
				    <div class="tooltip bottom tooltip_" role="tooltip" id="user_email_err">
					  <div class="tooltip-arrow"></div>
					  <div class="tooltip-inner">
					     Email is not empty!
					  </div>
					</div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword1">New Password</label>
				    <input type="password" class="form-control" id="inputPassword1" placeholder="New Password">
				    <div class="tooltip bottom tooltip_" role="tooltip" id="user_pas_err">
					  <div class="tooltip-arrow"></div>
					  <div class="tooltip-inner">
					     Password is not empty!
					  </div>
					</div>
				  </div>
				  <button type="submit" class="btn btn-default" id="sub_forgot_pas">Submit</button>
				</form>
			</div>
		</div>
		<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="tips">
		  <div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
		      <div class="modal-header">
		      	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
		      	<h4 class="modal-title" id="mySmallModalLabel">Hints</h4>
		      </div>
		      <div class="modal-body">
				Please go to the email to activate!
		      </div>
		    </div>
		  </div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		
		$('#sub_forgot_pas').click(function(e){
			e.preventDefault();
			var userEmail = $('#inputEmail1').val();
			var pas       = $('#inputPassword1').val();
			var emailReg  = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
			if(userEmail!== '' && pas !=='' && emailReg.test(userEmail) == true){
				$(".tooltip_").css('opacity',0);
				$.ajax({
					type:"post",
					url:"http://10.107.12.43:8080/interwar/user/forgetPwd.do",
					async:true,
					dataType:"json",
					data:{"email":userEmail,"password":pas},
					success:function(data){
						console.log(data)
						if(data.code==0){
							$("#tips").modal('show')
						}else{
							$("#tips .modal-body").html(data.msg);
							$("#tips").modal('show')
						}
					}
				});
			}else{
				$(".tooltip_").css('opacity',0)
				if(userEmail==''){
					$("#user_email_err").css('opacity',1)
				}else if(!emailReg.test(userEmail)){
					$("#user_email_err .tooltip-inner").html('Email format is wrong !')
					$("#user_email_err").css('opacity',1)
				}
				if(pas==''){
					$("#user_pas_err").css('opacity',1)
				}
			}
		})
	})
</script>
